<!--
 * @Date: 2023-02-13 15:02:00
 * @LastEditTime: 2023-02-24 13:52:42
 * @LastEditTime: 2023-02-18 18:38:45
 * @FilePath: /hash-guess-game/src/views/arena/arena.vue
 * 介绍:竞技场
-->
<script lang="ts" setup>
import { _require } from "@@/utils/tools/tools";
import competition from "./components/competition.vue";
import { apiWalletAddress } from "@@/api/module/balance";
import { copyText } from "@@/utils/tools/project";
import toast from "@@/components/rework/toast";
import { typeEnum } from "./mix";

const route = useRoute();
const query = route.query;
const arenaData = reactive({
  address: "",
  type: query.type as keyof typeof typeEnum,
});

/**获取钱包地址 */
async function getWalletAddress(): Promise<string | never> {
  const type: any = Math.floor(Number(arenaData.type));
  if (!(type >= 1 && type <= 4)) return getWalletAddress();
  const res = await apiWalletAddress({ type });
  if (res) return (arenaData.address = res);
  return getWalletAddress();
}
/**开始竞技 */
async function openCompetition() {
  if (arenaData.address) return competitionRef.value?.open();
  toast.loading();
  await promiseState;
  toast.close();
  competitionRef.value?.open();
}
/**提交状态 */
const promiseState = getWalletAddress();
const competitionRef = ref<InstanceType<typeof competition>>();
</script>

<template>
  <div class="arena">
    <h4>{{ $t("jing-ji-chang") }}</h4>
    <CardGlass class="CardGlass-wrap">
      <div class="Card_content">
        <h4>{{ $t(typeEnum[arenaData.type].title) }}</h4>
        <p class="code">
          {{ arenaData.address || `${$t("qing-shao-hou")}...` }}
        </p>
        <van-button
          @click="copyText(arenaData.address)"
          round
          class="copyBtn bevel"
          color="var(--C-B1)"
        >
          {{ $t("fu-zhi-di-zhi") }}
        </van-button>

        <Mimage
          height="500rem"
          :src="_require('src/assets/img/arena/jin-su-sai-che.png')"
        />
        <competition :arenaData="arenaData" ref="competitionRef" />
      </div>
    </CardGlass>
    <!-- 底部 -->
    <div class="floor">
      <Mimage
        class="floor_bgImage"
        :src="_require('src/assets/img/arena/cai-jian-bei-jin.svg')"
      />
      <div class="floor_content-box flex-J-SE">
        <VanButton @click="openCompetition" color="var(--C-M1)">
          {{ $t("jing-ji") }}
        </VanButton>
        <VanButton @click="$router.push({ name: 'meGameList' })" type="primary">
          {{ $t("sai-ji") }}
        </VanButton>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.arena {
  overflow: hidden;
  height: 100vh;
}
h4 {
  text-align: center;
}
.bevel {
  --box-show-C: var(--C-O1);
}
.CardGlass-wrap {
  margin: 0 calc(0rem - var(--gap-md));
  margin-top: var(--gap-sm);
  width: 100vw !important;
  :deep(.CardGlass_box) {
    border-top: var(--C-T1) solid 1rem;
    padding-bottom: 300rem;
  }
}
.Card_content {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 60rem;
  padding: var(--gap-md);
  text-align: center;
  height: 100vh;
  .copyBtn {
    border: var(--C-O5) solid 1rem !important;
    padding: 0.8em var(--gap-md);
  }
  & > * + * {
    margin-top: var(--gap-sm);
  }
}
.floor {
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100vw;
  .floor_bgImage {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100vw;
  }
  .floor_content-box {
    position: absolute;
    bottom: var(--gap-md);
    left: 0;
    width: 100vw;
    padding: var(--gap-md);
  }
  .van-button {
    padding: calc(var(--gap-sm) * 2) 100rem;
  }
}
</style>
